import React from 'react';
import { connect } from 'react-redux';
import BaseComponent from '../../components/common/baseComponent.js';
import { numberFromString, debounced } from '../../utils/func';
import { getQueryParam } from '../../utils/url';
import toast from '../../utils/toast';
import Alert from '../../components/common/alert.guangxi';

@connect(({ loading, pay }) => {
  return {
    busy: ['pay/exceptionPay', 'pay/fetchExceptionPayStation'].some(action => loading.effects[action]) || !pay.getIn(['exception', 'ready']),
    exception: pay.get('exception'),
  };
})
class ExecptionPay extends BaseComponent {
  state = {
    number: '',
  }

  componentDidMount() {
    const viceCardNo = getQueryParam('viceCardNo');
    this.props.dispatch({
      type: 'pay/fetchExceptionPayStation',
      payload: { viceCardNo },
    });
  }

  componentWillReceiveProps(nextProps) {
    if (!this.props.exception.get('success') && nextProps.exception.get('success')) {
      this.showAlert();
    }
  }

  showAlert = () => {
    const { dispatch } = this.props;
    this.alert.show({
      text: '支付成功',
      btns: [
        {
          title: '确定',
          action: () => {
            dispatch({ type: 'pay/clearExceptionPay' });
            this.setState({
              number: '',
            });
            this.alert.close();
          },
        },
      ],
    });
  }

  numChanged = (e) => {
    const number = e.target.value.replace(/[^0-9.]/g, ''); // 去掉非数字
    this.setState({ number });
  }

  validateNumber = (e) => {
    const number = numberFromString(e.target.value);
    this.setState({ number: `${number}` });
  }

  clickPay = debounced(() => {
    const { busy, exception } = this.props;
    if (busy) {
      return;
    }
    const { number } = this.state;
    const amount = Number(number);
    const openId = getQueryParam('openId');
    if (amount <= 0) {
      toast('请输入正确的金额');
    } else if (!exception.get('card')) {
      toast('未获取到油站数据');
    } else if (!openId) {
      toast('没有openid');
    } else {
      this.props.dispatch({
        type: 'pay/exceptionPay',
        payload: {
          openId,
          viceCardNo: exception.get('card'),
          source: 'PINGANYOUHUI',
          paySource: 'WECHAT',
          payMode: 'WECHATPUBLIC',
          amount,
        },
      });
    }
  }, 500)

  render() {
    const { number } = this.state;
    const { exception, busy } = this.props;

    return (
      <div className="exception-pay-pingan">
        <div className="content">
          <div className="title">线下支付</div>
          <div className="sub-title">油站名称</div>
          <div className="value station">{exception.get('station')}</div>
          <div className="sub-title">副卡卡号</div>
          <div className="value">{exception.get('card')}</div>
          <div className="circle-row">
            <div className="circle left" />
            <div className="circle right" />
          </div>
          <div className="sub-title">支付金额</div>
          <div className="input-row">
            <div className="unit">&#65509;</div>
            <input
              type="number"
              className={`input ${number.length > 0 ? 'active' : ''}`}
              onChange={this.numChanged}
              value={number}
              onBlur={this.validateNumber}
              placeholder="请输入支付金额"
            />
          </div>
          <div className={`action-btn ${busy ? 'disabled' : ''}`} onClick={this.clickPay}>
            <div className="container">确认支付</div>
          </div>
        </div>
        <Alert ref={alert => this.alert = alert} />
      </div>
    );
  }
}

export default ExecptionPay;
